<template>
  <div class="register">
    <a-card class="registerCard" title="用户注册">
      <a-form
          :model="formData"
          ref="formRef"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 17 }"
          autocomplete="off"
          style="margin-top: 20px"
      >
        <a-form-item
            label="用户名"
            name="username"
            :rules="[{ required: true, message: '请输入用户名' }]"
        >
          <a-input v-model:value="formData.username"/>
        </a-form-item>
        <a-form-item
            label="姓名"
            name="realname"
            :rules="[{ required: true, message: '请输入姓名' }]"
        >
          <a-input v-model:value="formData.realname"/>
        </a-form-item>
        <a-form-item
            label="头像"
            name="avatar"
            :rules="[{ required: true, message: '请上传头像' }]"
        >
          <JImageUpload v-model:value="formData.avatar"/>
        </a-form-item>
        <a-form-item
            label="性别"
        >
          <JDictSelectTag v-model:value="formData.sex" dictCode="sex"/>
        </a-form-item>
<!--        <a-form-item-->
<!--            label="专业领域"-->
<!--            name="specialty"-->
<!--            :rules="[{ required: true, message: '请选择专业领域' }]"-->
<!--        >-->
<!--          <JDictSelectTag v-model:value="formData.specialty" dictCode="specialty_type"/>-->
<!--        </a-form-item>-->
        <a-form-item
            label="生日"
        >
          <a-date-picker v-model:value="formData.birthday" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
        </a-form-item>
        <a-form-item
            label="电话"
        >
          <a-input v-model:value="formData.phone"/>
        </a-form-item>
        <a-form-item
            label="邮箱"
        >
          <a-input v-model:value="formData.email"/>
        </a-form-item>
        <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: '请输入密码' }]"
        >
          <a-input-password v-model:value="formData.password"/>
        </a-form-item>
        <a-form-item
            label="确认密码"
            name="confirmPassword"
            :rules="[{ required: true, message: '请输入确认密码' }]"
        >
          <a-input-password v-model:value="formData.confirmPassword"/>
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 2, span: 20 }" style="margin-top:35px">
          <a-button type="primary" danger size="large" style="width: 100%" @click="handleRegister" :loading="loading">注册
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import {reactive, ref} from 'vue';
import {apiUserRegister} from '@/api/user';
import {message} from 'ant-design-vue';
import JImageUpload from "@/components/public/JImageUpload.vue";
import JDictSelectTag from "@/components/public/JDictSelectTag.vue";
import router from "@/router";

const loading = ref(false);
const formRef = ref<any>();

const formData = reactive({
  username: '',
  realname: '',
  avatar: '',
  specialty: '',
  sex: '',
  birthday: '',
  email: '',
  phone: '',
  status: '',
  password: '',
  confirmPassword: '',
});


async function handleRegister() {
  try {
    await formRef.value.validate();
    loading.value = true;
    if (formData.confirmPassword != formData.password) {
      message.error("两次输入的密码不匹配");
      return
    }
    const data: any = await apiUserRegister(formData);
    if (data.success) {
      message.success('注册成功');
      await router.push("/login")
    } else {
      message.error(data.message);
    }
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

</script>
<style lang="less" scoped>
body {
  background: url(../../assets/img/bg.jpg);
}

.register {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.registerCard {
  width: 60%;
}

</style>
